<template>
  <div class="home h100">
    <router-view></router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item
        v-for="(item, index) in tabBar"
        :key="index"
        :to="item.path"
        :badge="item.badge ? $store.getters.allCount : null"
        :icon="item.icon"
      >
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabBar: [
        {
          path: "/home/index",
          icon: "/img/ke_img/资源2.png",
          title: "首页",
          active: 0,
        },
        {
          path: "/home/news",
          icon: "/img/ke_img/资源7.png",
          title: "消息",
          active: 1,
        },
        {
          path: "/home/question",
          icon: "/img/ke_img/资源4.png",
          title: "咨询",
          active: 2,
        },
        {
          path: "/home/game",
          icon: "/img/ke_img/资源11.png",
          title: "知识对战",
          active: 3,
        },
        {
          path: "/home/my",
          icon: "/img/ke_img/资源9.png",
          title: "我的",
          active: 4,
        },
      ],
    };
  },
  created() {
    this.active = this.tabBar.filter(
      (item) => item.path === this.$route.path
    )[0].active;
  },
};
</script>

<style scoped>
.van-tabbar-item.van-tabbar-item--active{
    color:#999999;
}
</style>